<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
<style type="text/css">
    .like-ani{
      -webkit-animation-name:likeani;
      animation-name:likeani;
      -webkit-animation-duration: .8s;
      animation-duration: .8s;
      -webkit-animation-timing-function:ease-in-out;
      animation-timing-function:ease-in-out;
  }

  .miniicon{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%) scale(1);
      display: block;
      color: red;
      z-index: -555;
      opacity: 0;

  }
  .icon-ani1{
      -webkit-animation-name:iconani1;
      animation-name:iconani1;
      -webkit-animation-duration: 1s;
      animation-duration: 1s;
      -webkit-animation-timing-function:ease-in-out;
      animation-timing-function:ease-in-out;
  }
  .icon-ani2{
      -webkit-animation-name:iconani2;
      animation-name:iconani2;
      -webkit-animation-duration: 1s;
      animation-duration: 1s;
      -webkit-animation-timing-function:ease-in-out;
      animation-timing-function:ease-in-out;
  }
  .icon-ani3{
      -webkit-animation-name:iconani3;
      animation-name:iconani3;
      -webkit-animation-duration: 1s;
      animation-duration: 1s;
      -webkit-animation-timing-function:ease-in-out;
      animation-timing-function:ease-in-out;
  }
  @-webkit-keyframes likeani{
      0% {-webkit-transform: scale(1);transform: scale(1);color: rgb(255,68,68);}
      60%{-webkit-transform: scale(1.2);transform: scale(1.2);color: rgb(255,20,20);}
      90%{-webkit-transform: scale(0.9);transform: scale(0.9);}
      100%{-webkit-transform: scale(1);transform: scale(1);color: rgb(255,0,0);}

  }
  @keyframes likeani{
      0% {-webkit-transform: scale(1);transform: scale(1);color: rgb(255,68,68);}
      60%{-webkit-transform: scale(1.2);transform: scale(1.2);color: rgb(255,20,20);}
      90%{-webkit-transform: scale(0.9);transform: scale(0.9);}
      100%{-webkit-transform: scale(1);transform: scale(1);color: rgb(255,0,0);}

  }

  @-webkit-keyframes iconani1{
      0% {-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);opacity: 0;}
      50%{-webkit-transform:translate(-50px,-60px) scale(0.9);transform:translate(-50px,-60px) scale(0.9);opacity: 0.6;}
      100%{-webkit-transform:translate(-50px,-100px) scale(0);transform:translate(-50px,-100px) scale(0);opacity: 1;}
  }
  @keyframes iconani1{
      0% {-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);opacity: 0;}
      50%{-webkit-transform:translate(-50px,-60px) scale(0.9);transform:translate(-50px,-60px) scale(0.9);opacity: 0.6;}
      100%{-webkit-transform:translate(-50px,-100px) scale(0);transform:translate(-50px,-100px) scale(0);opacity: 1;}
  }
  @-webkit-keyframes iconani2{
      0% {-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);opacity: 0;}
      50%{-webkit-transform:translate(0px,-60px) scale(0.9);transform:translate(0px,-60px) scale(0.9);opacity: 0.5;}
      100%{-webkit-transform:translate(0px,-100px) scale(0);transform:translate(0px,-100px) scale(0);opacity: 1;}
  }
  @keyframes iconani2{
      0% {-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);opacity: 0;}
      50%{-webkit-transform:translate(0px,-60px) scale(0.9);transform:translate(0px,-60px) scale(0.9);opacity: 0.5;}
      100%{-webkit-transform:translate(0px,-100px) scale(0);transform:translate(0px,-100px) scale(0);opacity: 1;}
  }
  @-webkit-keyframes iconani3{
      0% {-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);opacity: 0;}
      50%{-webkit-transform:translate(40px,-60px) scale(0.9);transform:translate(40px,-60px) scale(0.9);opacity: 0.5;}
      100%{-webkit-transform:translate(40px,-100px) scale(0);transform:translate(40px,-100px) scale(0);opacity: 1;}
  }
  @keyframes iconani3{
      0% {-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);opacity: 0;}
      50%{-webkit-transform:translate(40px,-60px) scale(0.9);transform:translate(40px,-60px) scale(0.9);opacity: 0.5;}
      100%{-webkit-transform:translate(40px,-100px) scale(0);transform:translate(40px,-100px) scale(0);opacity: 1;}
  }
</style>



<div class="like " style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);">
    <!-- 嵌入layui的字体图标 -->
    <!-- 组件文档 "https://www.layui.com/doc/element/icon.html" -->
    <i class="likeicon layui-icon layui-icon-heart" data-iconfill='layui-icon-heart-fill' data-anilike='like-ani' style="font-size: 100px;color: red;cursor: pointer;display: block;"></i> 
    <i class="miniicon layui-icon layui-icon-heart-fill" data-ani='icon-ani1'></i> 
    <i class="miniicon layui-icon layui-icon-heart-fill" data-ani='icon-ani2'></i> 
    <i class="miniicon layui-icon layui-icon-heart-fill" data-ani='icon-ani3'></i> 
</div>

<script type="text/javascript">
    //取得小红心的jq对象
    var miniicon=$('.miniicon');
    $('.likeicon').on('click',function(){
    	var likethis=$(this),
    	iconfill=likethis.data('iconfill'),
    	anilike=likethis.data('anilike');
        //去掉空心红心的字体图标
        likethis.removeClass('layui-icon-heart');
        //默认点击后取消动画
        miniicon.each(function(){
            $(this).removeClass($(this).data('ani'));
        });
        likethis.removeClass(anilike);
    	//利用事件循环机制，保证每次点击都会有一次动画类名的添加。
        setTimeout(function(){
            miniicon.each(function(){
                $(this).addClass($(this).data('ani'));
            });
            likethis.addClass(anilike).addClass(iconfill);
        });
        
    });
</script>